<template>
    <van-nav-bar title="分类" placeholder fixed />
    <van-sidebar v-model="sidebaractive" class="left-content">
        <van-sidebar-item :title="item" v-for="(item, index) in items" :key="index" />
    </van-sidebar>
    <van-tabbar v-model="active" route placeholder fixed>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" to="/cate">分类</van-tabbar-item>
        <van-tabbar-item icon="cart-o" to="/cart" :badge="cartArr.length">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { cateListReq } from '@/api/cate';
import { cartArr } from '@/store/cart';
// import axios from 'axios';
import { ref } from 'vue';
let sidebaractive = ref(0);
let active = ref(0);
let items = ref([]);
async function getCateList() {
    // let r = await axios.get("http://localhost:3001/api/pro/categorylist");
    cateListReq().then((r) => {
        console.log(r.data);
        items.value = r.data.data;
    })
}
getCateList();
</script>

<style scoped>
.left-content {
    height: calc(100vh - 96px);
}
</style>